<template>
  <div>
    <ConTertiary />
    <div class="bottom" v-if="this.$store.getters.getUserShopNum == 0">
      <div class="content">
        <img src="../assets/小人.png" alt="" />
        <div class="text">
          <div class="text-top">您的购物车还是空的！</div>
          <div class="text-bottom">快去购物吧！</div>
        </div>
      </div>
    </div>

    <div
      class="content-container"
      v-if="this.$store.getters.getUserShopNum > 0"
    >
      <div class="container">
        <el-table
          ref="selections"
          :cell-style="cellStyle"
          :row-style="rowStyle"
          :header-cell-style="headerStyle"
          :data="info"
          tooltip-effect="dark"
          style="width: 100%"
          @select="handleSelection"
          @select-all="handleSelection"
          @cell-click="(val) => handleChange(val, handleSelection)"
        >
          <el-table-column type="selection" width="84"> </el-table-column>
          <el-table-column prop="productPicture" width="100" label="">
            <template slot-scope="scope">
              <img
                style="
                   {
                    width: 80px;
                    height: 80px;
                  }
                "
                :src="'http://www.codeedu.com.cn/' + scope.row.productPicture"
                alt=""
              />
            </template>
          </el-table-column>

          <el-table-column label="商品名称" width="120">
            <template slot-scope="scope">
              {{ scope.row.productName }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="" width="300"> </el-table-column>
          <el-table-column prop="productSellingPrice" label="单价" width="120">
            <template slot-scope="scope"
              >{{ scope.row.productSellingPrice }}元
            </template>
          </el-table-column>
          <el-table-column prop="num" label="数量">
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                v-model="scope.row.num"
                :min="1"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="小计">
            <template slot-scope="scope">
              {{ scope.row.productSellingPrice * scope.row.num }}元
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, info)"
                type="danger"
                icon="el-icon-delete-solid"
                circle
                size="medium"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="bottom-bottom">
          <div class="onward">
            <router-link :to="{ name: 'AllStore' }">继续购物</router-link>
          </div>
          <div v-if="info != null" class="total-select">
            共<span>{{ info.length }}</span
            >件商品，已选择<span class="number">0</span>件
          </div>
          <div class="total-price">
            <span>合计：</span><span id="total">0元</span>
          </div>
          <button @click="gotoTips">去结算</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ConTertiary from "./ConTertiary.vue";
import {
  getShoppingCart,
  setShoppingCartNum,
  deleteShoppingCartNum,
  generateOrder,
} from "../api/home";
export default {
  name: "MyShop",
  components: { ConTertiary },
  data() {
    return {
      info: [],
      isIndeterminate: false,
      selections: [],
    };
  },

  methods: {
    deleteRow(index, rows) {
      console.log(this.info[index]);
      deleteShoppingCartNum(this.info[index].shoppingCartId).then((res) => {
        console.log(res);
      });
      rows.splice(index, 1);
      this.$store.dispatch("getUserInfo");
    },
    init() {
      getShoppingCart().then((res) => {
        this.info = res.data;
      });
    },

    toggleSelection() {
      let rows = JSON.parse(localStorage.getItem("selection"));
      if (rows) {
        rows.forEach((row) => {
          this.info.find((item) => {
            if (row.shoppingCartId == item.shoppingCartId) {
              this.$refs.selections.toggleRowSelection(item, true);
            }
          });
        });
      }
      this.handleSelection(rows);
    },
    headerStyle({ rowIndex }) {
      if (rowIndex == 0) {
        return {
          height: 82 + "px",
          textAlign: "center",
        };
      }
    },
    rowStyle() {
      return {
        height: 116 + "px",
      };
    },
    cellStyle() {
      return {
        textAlign: "center",
      };
    },

    handleSelection(selection) {
      if (selection != null) {
        let obj = document.getElementsByClassName("number")[0];
        let total = document.getElementById("total");
        obj.innerHTML = selection.length;
        this.selections = selection;
        total.innerHTML =
          selection.reduce((pre, cur) => {
            return pre + cur.productSellingPrice * cur.num;
          }, 0) + "元";
        localStorage.setItem("selection", JSON.stringify(this.selections));
      }
    },
    handleChange(row, callback) {
      this.selections.forEach((item) => {
        if (item.productId == row.productId) {
          item.num = row.num;
        }
      });
      setShoppingCartNum({
        num: row.num,
        shoppingCartId: row.shoppingCartId,
      }).then(() => {
        localStorage.setItem("selection", this.selections);
        callback(this.selections);
      });
    },
    gotoTips() {
      if (this.selections.length !== 0) {
        let shoppindcars = [];
        this.selections.forEach((item) => {
          shoppindcars.push(item.shoppingCartId);
        });
        setShoppingCartNum().then(() => {
          this.$store.state.userShoppingCarNum -= shoppindcars.length;
          this.$store.dispatch("getUserInfo");
        });
        generateOrder(shoppindcars).then(() => {
          this.$router.push({ path: "/my-tips" });
        });
        localStorage.removeItem("selection");
      }
    },
  },

  mounted() {
    this.init();
  },
  beforeUpdate() {},
  updated() {
    this.toggleSelection();
  },
};
</script>

<style lang="scss" scoped>
.content-container {
  width: 100%;
  background: #f5f5f5;
  padding-bottom: 24px;
  .container {
    padding-top: 47px;
    width: 1200px;
    margin: auto;
    ::v-deep
      .el-table__header
      .el-table-column--selection
      .cell
      .el-checkbox:after {
      color: #606266;
      content: "全选";
      font-size: 14px;
      margin-left: 10px;
    }
  }
  .bottom-bottom {
    background: #ffffff;
    margin-top: 24px;
    width: 1200px;
    height: 48px;
    display: flex;
    position: relative;
    .onward {
      font-size: 16px;
      margin: 14px 0px 14px 0px;
      width: 116px;
      line-height: 16px;
      border-right: 2px solid #b0b0b0;
      text-align: center;
    }
    button {
      width: 200px;
      position: absolute;
      height: 48px;
      right: 0px;
      background: #e0e0e0;
      color: #909399;
      font-size: 20px;
      line-height: 100%;
      border: none;
    }
    button:hover {
      background-color: #ff6700;
      color: #ffffff;
      cursor: pointer;
    }
    .total-select {
      font-size: 16px;
      line-height: 100%;
      margin: 16px 0 0 25px;
      color: #606266;
      span {
        color: #ff6700;
      }
    }
    .total-price {
      position: absolute;
      top: 4px;
      right: 244px;
      font-size: 32px;
      color: #ff6700;
      span:nth-child(1) {
        line-height: 100%;
        height: 32px;
        font-size: 14px;
      }
    }
  }
}
.bottom {
  width: 100%;
  height: 598px;
  background: #f5f5f5;
  .content {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding-top: 46px;
    display: flex;
    img {
      display: block;
      width: 362px;
      height: 362px;
      margin-left: 98px;
    }
    .text {
      margin: 114px 0 0 80px;
      height: 78px;
      color: #b0b0b0;
      .text-top {
        font-size: 36px;
        line-height: 100%;
      }
      .text-bottom {
        margin-top: 24px;
        font-size: 18px;
        line-height: 100%;
      }
    }
  }
}
</style>
